<template>
  <div style="height: 600px">
    <div class="flex-row-start-start">
      <div style="width: 90%" class="flex-row-start-center">
        <Select
          v-model="jzName"
          style="width: calc(11.11% - 10px); margin-right: 10px"
          placeholder="井组名称"
          size="large"
          clearable
        >
          <Option v-for="item in jzNameList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
      </div>
      <div style="width: 10%" class="flex-row-end-center">
        <Button
          type="error"
          style="width: 60px; text-align: center"
          @click="onQuery"
          >查询</Button
        >
      </div>
    </div>
    <div style="margin-top: 20px">
      <Table :columns="columns" :data="tableData"></Table>
      <div
        class="flex-row-end-center"
        style="margin-top: 10px"
        v-if="totalLen > 10"
      >
        <Page
          :total="totalLen"
          :page-size="pageSize"
          show-total
          @on-change="changepage"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      jcEventList: [],
      jcEvent: "",
      jzId: "",
      jzName: "",
      jzNameList: [],
      jzIdList: [],
      kqName: "",
      kqNameList: [],
      jcdId: "",
      jcdName: "",
      jcdNameList: [],
      jcdIdList: [],
      jcdStateList: ["正常", "异常"],
      curPage: 0,
      jcdState: "",
      columns: [
        // { title: "采样检测事件编号", key: "jcEventId" },
        // { title: "库区名称", key: "kqName" },
        // { title: "井组编号", key: "jzId" },
        { title: "检测点名称", key: "jcdName" },
        { title: "井组名称", key: "jzName" },
        // { title: "检测点编号", key: "jcdId" },
        { title: "数值状态", key: "jcState" },
        { title: "检测点坐标", key: "jcPoint" },
        { title: "检测数值", key: "jcValue" },
        { title: "数据最后更新时间", key: "updateTime" },
      ],
      pageSize: 10,
      tableData: [],
      
    };
  },
  props: {
    jcdInfoList: Array,
    selQk: String,
    totalLen:Number
  },
  
  watch: {
    jcdInfoList(val) {
      this.tableData = val.slice(0, this.pageSize);
      this.jcEventList = [];
      this.jzIdList = [];
      this.jcdIdList = [];
      this.kqNameList = [];
      this.jcdNameList = [];
      // this.jzNameList = [];
      this.curPage = 0;
      let it = this;
      // val.forEach((ele) => {
      //   if (this.jcEventList.indexOf(ele.jcEventId) < 0) {
      //     this.jcEventList.push(ele.jcEventId);
      //   }
      //   if (this.jzIdList.indexOf(ele.jzId) < 0) {
      //     this.jzIdList.push(ele.jzId);
      //   }
      //   if (this.jzNameList.indexOf(ele.jzName) < 0) {
      //     this.jzNameList.push(ele.jzName);
      //   }
      //   if (this.jcdIdList.indexOf(ele.jcdId) < 0) {
      //     this.jcdIdList.push(ele.jcdId);
      //   }
      //   if (this.jcdNameList.indexOf(ele.jcdName) < 0) {
      //     this.jcdNameList.push(ele.jcdName);
      //   }
      //   if (this.kqNameList.indexOf(ele.kqName) < 0) {
      //     this.kqNameList.push(ele.kqName);
      //   }
      //   it.kqNameList.forEach((item) => {
      //     if (item.indexOf(it.selQk) > -1) {
      //       it.kqName = item;
      //     }
      //   });
      // });
    },
  },
  created(){
    console.log("组件初始化11111")
    this.getJzNameList()
    // console.log(<Table/>)
  },
  methods: {

    getJzNameList(){
      let param={kqName:this.kqName};
      this.$axios
        .post("/getJzNameList", param, {
          headers: { "Content-Type": "application/json;charset=UTF-8" },
        })
        .then((response) => {
            console.log(response.data)
            if(response.data!=null)
            {
              this.jzNameList=response.data;
            }
        })
        .catch((error) => {});
    },

    changepage(index) {
      let it = this;
      let o = {};
      if (it.jcEvent == "" || it.jcEvent == undefined) {
        it.jcEvent = "";
      }
      if (it.kqName == "" || it.kqName == undefined) {
        it.kqName = "";
      }
      if (it.jzId == "" || it.jzId == undefined) {
        it.jzId = "";
      }
      if (it.jzName == "" || it.jzName == undefined) {
        it.jzName = "";
      }
      if (it.jcdId == "" || it.jcdId == undefined) {
        it.jcdId = "";
      }
      if (it.jcdName == "" || it.jcdName == undefined) {
        it.jcdName = "";
      }
      if (it.jcState == "" || it.jcState == undefined) {
        it.jcState = "";
      }
      o.jcEventId = it.jcEvent;
      o.kqName = it.kqName;
      o.jzId = it.jzId;
      o.jzName = it.jzName;
      o.jcdId = it.jcdId;
      o.jcdName = it.jcdName;
      o.jcState = it.jcState;
      o.page = index - 1;
      this.curPage = index;
      this.$emit("change-to-page", o);
    },
    onQuery() {
      let it = this;
      let o = {};
      if (it.jcEvent == "" || it.jcEvent == undefined) {
        it.jcEvent = "";
      }
      if (it.kqName == "" || it.kqName == undefined) {
        it.kqName = "";
      }
      if (it.jzId == "" || it.jzId == undefined) {
        it.jzId = "";
      }
      if (it.jzName == "" || it.jzName == undefined) {
        it.jzName = "";
      }
      if (it.jcdId == "" || it.jcdId == undefined) {
        it.jcdId = "";
      }
      if (it.jcdName == "" || it.jcdName == undefined) {
        it.jcdName = "";
      }
      if (it.jcState == "" || it.jcState == undefined) {
        it.jcState = "";
      }
      o.jcEventId = it.jcEvent;
      o.kqName = it.kqName;
      o.jzId = it.jzId;
      o.jzName = it.jzName;
      o.jcdId = it.jcdId;
      o.jcdName = it.jcdName;
      o.jcState = it.jcState;
      o.page = 0;
      this.$emit("change-to-page", o);
    },
    query() {
      let data = [];
      let it = this;
      if (
        !(
          (it.jcEvent == "" || it.jcEvent == undefined) &&
          (it.kqName == "" || it.kqName == undefined) &&
          (it.jzId == "" || it.jzId == undefined) &&
          (it.jzName == "" || it.jzName == undefined) &&
          (it.jcdId == "" || it.jcdId == undefined) &&
          (it.jcdName == "" || it.jcdName == undefined) &&
          (it.jcdState == "" || it.jcdState == undefined)
        )
      ) {
        data = this.jcdInfoList.filter(function (item) {
          return (
            (it.jcEvent != "" ? item.id == it.jcEvent : true) &&
            (it.kqName != "" ? item.kqName == it.kqName : true) &&
            (it.jzId != "" ? item.jzId == it.jzId : true) &&
            (it.jcdId != "" ? item.jcdId == it.jcdId : true) &&
            (it.jcdState != "" ? item.jcState == it.jcdState : true)
          );
        });
        this.tableData = data.slice(0, this.pageSize);
      } else {
        this.tableData = this.jcdInfoList.slice(0, this.pageSize);
      }
    },
  },
};
</script>
<style scoped>
</style>